<template>
  <div class="screen-layout relative flex flex-col h-full overflow-hidden"
       id="screen-layout">
    <desktopheader @emitWay="itemHandler"></desktopheader>
    <div class="screen-layout__content flex-1">
      <div class="item-full">
        <div v-for="(item,index) in showViewList"
             :key="index"
             class="item">
          <div class="item-card">
            <div class="item-card-box" @click="itemHandler(item)">
              <img class="item-card-img"
                   :src="item.img" />
              <span class="item-card-text">{{item.text}}</span>
            </div>

          </div>
        </div>
      </div>
    </div>

      <formviewdialog :formViewData="formViewData"
                    :rowDataItem="rowDataItem"
                    ref="formView-dialog" v-if="formViewVisible"></formviewdialog>
        <desktopLayout ref="desktop-layout"></desktopLayout>
  </div>
</template>

<script>

import desktopheader from './components/desktop-header'
import desktopLayout from './components/desktop-layout'
import formviewdialog from '@/components/gadget/crud-form-plus/components/form-view-dialog'
import { clearLoginInfo } from '@/utils'
export default {
  name: 'PortalLayout',
  mixins: [],
  provide () {
    return {

    }
  },
  props: {

  },
  components: {
    desktopheader, formviewdialog, desktopLayout
  },
  data () {
    return {
      portalLoading: false,
      dataForm: {

      },
      showViewList: [
        {
          img: this.$ossLink + '/app/other/img_wlsq.png',
          text: '物料申请',
          type: 1
        },
        {
          img: this.$ossLink + '/app/other/img_wlqr.png',
          text: '物料确认',
          type: 2
        },
        {
          img: this.$ossLink + '/app/other/img_gjxxfk.png',
          text: '工具反馈',
          type: 6
        },
        {
          img: this.$ossLink + '/app/other/img_sqjl.png',
          text: '申请记录',
          type: 3
        },
        {
          img: this.$ossLink + '/app/other/img_blxf.png',
          text: '物资查询',
          type: 8
        },
        {
          img: this.$ossLink + '/app/other/img_qlzz.png',
          text: '缺料追踪',
          type: 5
        }

        // {
        //   img: this.$ossLink + '/app/other/img_tcxt.png',
        //   text: '退出系统',
        //   type: 4
        // }
      ],
      showBomViewList: [
        {
          img: this.$ossLink + '/app/other/img_wlsq.png',
          text: '物料申请',
          type: 1
        }
      ],
      formViewData: {
        formCode: '',
        formKey: '',
        dataFrom: ''
      },
      formViewVisible: false,
      rowDataItem: {}

    }
  },
  created () {

  },
  computed: {

  },
  watch: {

  },
  mounted () {

  },
  methods: {
    itemHandler (item) {
      if (item.type === 1) {
        this.formViewData = { formCode: '1522830212105113600', formKey: 'id', dataFrom: 'rowdata' }
        this.rowDataItem = {
          ticket_status_key: '0'
        }
        this.formViewVisible = true
        this.$nextTick(() => {
          this.$refs['formView-dialog'].width = '90%'
          this.$refs['formView-dialog'].visible = true
        })
      }
      if (item.type === 2) {
        this.$nextTick(() => {
          this.$refs['desktop-layout'].width = '80%'
          this.$refs['desktop-layout'].title = '物资确认'
          this.$refs['desktop-layout'].pageId = '1525723469639098369'
          this.$refs['desktop-layout'].init()
        })
      }
      if (item.type === 3) {
        this.$nextTick(() => {
          this.$refs['desktop-layout'].width = '80%'
          this.$refs['desktop-layout'].title = '物资申请记录'
          this.$refs['desktop-layout'].pageId = '1525772518158913538'
          this.$refs['desktop-layout'].init()
        })
      }
      if (item.type === 4) {
        this.logoutHandle()
      }
      if (item.type === 5) {
        this.$nextTick(() => {
          this.$refs['desktop-layout'].width = '70%'
          this.$refs['desktop-layout'].title = '缺料追踪'
          this.$refs['desktop-layout'].pageId = '1548980425182986241'
          this.$refs['desktop-layout'].init()
        })
      }
      if (item.type === 6) {
        this.$nextTick(() => {
          this.$refs['desktop-layout'].width = '70%'
          this.$refs['desktop-layout'].title = '工具信息反馈'
          this.$refs['desktop-layout'].pageId = '1597486776008515586'
          this.$refs['desktop-layout'].init()
        })
      }
      if (item.type === 7) {
        this.$nextTick(() => {
          this.$refs['desktop-layout'].width = '70%'
          this.$refs['desktop-layout'].title = '备料提报'
          this.$refs['desktop-layout'].pageId = '1599669840319029250'
          this.$refs['desktop-layout'].init()
        })
      }
      if (item.type === 8) {
        this.$nextTick(() => {
          this.$refs['desktop-layout'].width = '70%'
          this.$refs['desktop-layout'].title = '物资查询'
          this.$refs['desktop-layout'].pageId = '1743152761570803714'
          this.$refs['desktop-layout'].init()
        })
      }
      if (item.type === 9) {
        this.$nextTick(() => {
          this.$refs['desktop-layout'].width = '70%'
          this.$refs['desktop-layout'].title = '班组成本核算'
          this.$refs['desktop-layout'].pageId = '1612394294518161410'
          this.$refs['desktop-layout'].init()
        })
      }
    },

    logoutHandle () {
      this.$confirm(this.$t('prompt.info', { 'handle': this.$t('logout') }), this.$t('prompt.title'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        this.$interface.system.userLogoutApi().then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          clearLoginInfo()
          this.$router.replace({ name: 'login' })
        }).catch(() => { })
      }).catch(() => { })
    }
  },
  beforeCreate () {

  },
  beforeDestroy () {

  }
}
</script>
<style lang="scss" scoped>
.screen-layout {
  height: 100vh;
  background-color: #111324;
  .screen-layout__content {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(360deg, #192965 0%, #08090c 100%);
  }
  .item-full {
    display: flex;
    flex-wrap: wrap;
    width: 910px;
    justify-content: space-between;
    align-items: center;
    align-content: space-around;
    margin-bottom: 150px;
    .item {
      .item-card {
        width: 228px;
        height: 228px;
        background: #ffffff1c;
        border-radius: 24px;
        border: 1px solid #ffffff33;
        margin: 90px 0 0 0;
        cursor: pointer;
        .item-card-box {
          width: 140px;
          height: 180px;
          margin: 24px 0 0 44px;
          .item-card-img {
            width: 140px;
            height: 140px;
          }
          .item-card-text {
            width: 104px;
            height: 32px;
            display: block;
            overflow-wrap: break-word;
            color: #ffffff;
            font-size: 24px;
            letter-spacing: 2px;
            font-family: SegoeUI-Bold;
            white-space: nowrap;
            line-height: 32px;
            text-align: center;
            margin: 8px 0 0 18px;
          }
        }
      }
    }
  }
}
</style>
